<template>
  <div class="secret-wrap">
    <el-card>
      <div class="tabs-wrap">
        <el-tabs
            v-model="activeName"
            type="card"
            @tab-change="tabChange"
        >
          <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name">
            <div class="box-wrap">
              <div class="box-wrap-item" v-for="(item, index) in secretList" :key="index">
                <div class="item-context">
                  <el-text truncated>{{ item.name }}</el-text>
                </div>
                <div class="item-tool">
                  <el-tag effect="dark" type="danger" size="small" round @click="handleDeleteSecret(item)">删除</el-tag>
                </div>
              </div>
              <div class="box-wrap-add">
                <el-button :icon="Plus" color="#3f9eff" style="color: #ffffff" circle @click="handleAddSecret"/>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

    <el-dialog v-model="secretDialog"
               title="添加密钥"
               :center="true"
    >
      <el-form :model="secretForm">
        <el-form-item label="密钥类型">
          <el-input v-model="secretForm.type" disabled/>
        </el-form-item>
        <el-form-item label="密钥名称">
          <el-input v-model="secretForm.name" clearable/>
        </el-form-item>
        <el-form-item label="密钥帐号">
          <el-input v-model="secretForm.secretKey" clearable/>
        </el-form-item>
        <el-form-item label="密钥密码">
          <el-input type="password" v-model="secretForm.secretValue" autocomplete="off" show-password/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="secretDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleAddSecretConfirm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import {ElMessageBox, TabPaneName} from 'element-plus'
import {Plus} from "@element-plus/icons-vue";
import {SecretData} from "@/data/TaskData.ts";
import { getSecretList, addSecret, deleteSecret } from "@/api/SecretApi.ts"

const activeName = ref<string>('GIT')
const secretList = ref<Array<SecretData>>([])
const secretForm = ref<SecretData>(
    {
      name: '',
      type: activeName.value,
      secretKey: '',
      secretValue: ''
    }
)
const secretDialog = ref<boolean>(false)

interface TabData{
  name: string,
  label: string
}
const tabs = ref<Array<TabData>>([
  {
    name: "GIT",
    label: "git"
  },
  {
    name: "SSH",
    label: "ssh"
  },
  {
    name: "DOCKER",
    label: "docker"
  }
])

onMounted(() => {
  handleSecretList(activeName.value)
})

const handleSecretList = async (type:string) => {
  const rs = await getSecretList(type)
  secretList.value = rs.data ? rs.data : []
}

const tabChange = async (tab: TabPaneName) => {
  await handleSecretList(tab as string)
}

const handleAddSecret = () => {
  secretForm.value = {
    name: '',
    type: activeName.value,
    secretKey: '',
    secretValue: ''
  }
  secretDialog.value = true
}

const handleAddSecretConfirm = async () => {
  const rs = await addSecret(secretForm.value)
  if(rs.code === '200'){
    secretDialog.value = false
    await handleSecretList(activeName.value)
  }
}

const handleDeleteSecret = (data:SecretData) => {
  ElMessageBox.confirm(`是否要删除密钥：${data.name} ？`,
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    const rs = await deleteSecret(data.type, data.name)
    if(rs.code === '200'){
      await handleSecretList(activeName.value)
    }
  }).catch(() => {})
}
</script>

<style lang="less" scoped>
.secret-wrap{
  padding: 50px;
  display: flex;
  justify-content: center;

  .tabs-wrap{
    min-width: 800px;
    min-height: 500px;
    max-width: 1200px;

    .box-wrap{
      display: flex;
      gap: 10px;
      flex-wrap: wrap;

      .box-wrap-item{
        height: 80px;
        width: 150px;
        border-radius: 8px;
        border: 1px solid #3f9eff;
        display: flex;
        flex-wrap: wrap;
        font-size: 15px;

        .item-context{
          height: 50px;
          width: 100%;
          padding: 5px;
          display: flex;
          justify-content: center;
        }

        .item-tool{
          display: flex;
          justify-content: flex-end;
          align-items: center;
          height: 20px;
          width: 100%;
          padding-right: 5px;

          .el-tag{
            font-size: 10px;
            cursor: pointer;
          }
        }
      }

      .box-wrap-add{
        height: 80px;
        width: 150px;
        border-radius: 8px;
        border: 1px solid #3f9eff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>